<!--教师添加管理 冯云威-->
<template>
    <section>
        <el-form ref="editForm" :model="editForm" :rules="addFormRules" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item label="姓名" prop="teacherRealName">
                            <el-input v-model="editForm.teacherRealName" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </div>
                </el-col>

            </el-row>

            <!-- <div class="phono">
                 <el-upload
                         class="upload-demo"
                         drag
                         action="https://jsonplaceholder.typicode.com/posts/"
                         multiple>
                     <i class="el-icon-upload"></i>
                     <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                     <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                 </el-upload>
             </div>-->

            <div class="grid-content bg-purple-light">
                <el-form-item label="照片">
                    <my-upload buttonName="选择照片" @selectedFile="selectedFile"></my-upload>
                    <el-tag :type="file.type">{{file.fileName}}</el-tag>
                </el-form-item>
            </div>

            <div class="grid-content bg-purple-light">
                <el-form-item label="性别">
                    <el-radio-group v-model="editForm. teacherSex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>


            <div class="grid-content bg-purple-light">
                <el-form-item label="课程名称">
                    <el-select v-model="editForm.courseId" placeholder="请选择课程名称">
                        <el-option v-for="item in allCourse" :key="item.courseId" :label="item.courseName"
                                   :value="item.courseId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>

            <div class="grid-content bg-purple">
                <el-form-item label="政治面貌" style="width: 170%;">
                    <el-select v-model="editForm.teacherPolitical" placeholder="请选择">
                        <el-option label="党员" value="党员"></el-option>
                        <el-option label="团员" value="团员"></el-option>
                        <el-option label="群众" value="群众"></el-option>
                    </el-select>
                </el-form-item>
            </div>


            <div class="grid-content bg-purple">
                <el-form-item label="教师类别">
                    <el-select v-model="editForm.teacherCategory" placeholder="请选择教师类别">
                        <el-option label="初级教师" value="初级教师"></el-option>
                        <el-option label="中级教师" value="中极教师"></el-option>
                        <el-option label="高级教师" value="高级教师"></el-option>
                        <el-option label="副教授" value="副教授"></el-option>
                        <el-option label="教授" value="教授"></el-option>
                        <el-option label="副院士" value="副院士"></el-option>
                        <el-option label="院士" value="院士"></el-option>
                    </el-select>
                </el-form-item>
            </div>

            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <el-form-item label="民族">
                            <el-input v-model="editForm.teacherNational" placeholder="请输入民族"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item label="出生日期">
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" v-model="editForm.teacherBirth"
                                                style="width: 170%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item label="最高学历">
                            <el-input v-model="editForm.teacherRecord" placeholder="请输入最高学历"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="16">
                    <div class="grid-content bg-purple-light">
                        <el-form-item label="籍贯">
                            <el-input v-model="editForm.teacherNative" placeholder="请输入籍贯"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="16">
                    <div class="grid-content bg-purple">
                        <el-form-item label="毕业学校">
                            <el-input v-model="editForm.teacherSchool" placeholder="请输入毕业学校"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="16">
                    <div class="grid-content bg-purple-light">
                        <el-form-item prop="teacherEmail" label="邮箱">
                            <el-input v-model="editForm.teacherEmail" placeholder="请输入正确的邮箱地址"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="16">
                    <div class="grid-content bg-purple">
                        <el-form-item label="手机号：" prop="teacherPhone">
                            <el-input v-model="editForm.teacherPhone" placeholder="请输入手机号" type="text"
                                      auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="16">
                    <div class="grid-content bg-purple">
                        <el-form-item label="最高学位">
                            <el-input v-model="editForm.teacherDegree" placeholder="请输入最高学位"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="16">
                    <div class="grid-content bg-purple">
                        <el-form-item label="地址">
                            <el-input v-model="editForm.teacherAdderss" placeholder="请输入地址"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>


            <!--<el-row>
                <el-col :span="16">
                    <div class="grid-content bg-purple-light">
                        <el-form-item label="密码">
                            <el-input type="password" v-model="editForm.teacherPwd" auto-complete="off"
                                      placeholder="请输入密码"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>-->

            <el-row>
                <el-col :span="16">
                    <el-form-item label="进修情况">
                        <el-input type="textarea" v-model="editForm.teacherTranning"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="16">
                    <el-form-item label="曾获奖励">
                        <el-input type="textarea" v-model="editForm.teacherReward"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="16">
                    <el-form-item label="曾获处分">
                        <el-input type="textarea" v-model="editForm.teacherPunish"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="16">
                    <el-form-item label="个人简介">
                        <el-input type="textarea" v-model="editForm.teacherDetail"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible">取消</el-button>
            <el-button type="primary" @click.native="editSubmit">保存</el-button>
        </div>
    </section>
</template>
<style>
    /* .phono{
         margin-left: 80px ;
     }*/
    .dialog-footer {
        margin-left: 80px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .el-input {
        width: 80%;
    }

    .el-row {
        margin-bottom: 20px;
    }

    .el-col {
        border-radius: 4px;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<script>
    import {insertTeacher, getRole, allCourse} from '../../api/api';
    import myUpload from './public/myUpload.vue'
    export default {
        components: {myUpload},
        data() {
            //自定义手机
            var teacherPhone = (rule, value, callback)=>
            {
                var reg = /^1[0-9]{10}$/;
                if (!reg.test(value)) {
                    callback(new Error('请输入正确的手机号码'));
                } else {
                    callback();
                }
            };
            return {
                roleDesc: [],
                allCourse: [],
                editForm: {
                    courseName: '',
                    courseId: '',
                    teacherPwd: '',
                    teacherId: '',
                    teacherRealName: '',
                    teacherBirth: '',
                    teacherSex: '',
                    teacherPolitical: '',
                    teacherNational: '',
                    teacherRecord: '',
                    teacherNative: '',
                    teacherSchool: '',
                    teacherDegree: '',
                    teacherEmail: '',
                    teacherPhone: '',
                    teacherAdderss: '',
                    teacherCategory: '',
                    teacherTranning: '',
                    teacherReward: '',
                    teacherPunish: '',
                    teacherDetail: '',
                    teacherPhoto: '',
                    roleId: ''
                },
                addFormRules: {
                    teacherPhone: [
                        {required: true, validator: teacherPhone, trigger: 'blur'}
                    ],
                    teacherEmail: [
                        {required: true, message: '请输入邮箱地址', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change'}
                    ],
                    teacherRealName: [
                        {required: true, trigger: 'blur'}
                    ],
                    teacherBirth: [
                        {required: true, trigger: 'blur'}
                    ],
                    teacherSex:[
                        {required: true, trigger: 'blur'}
                    ],
                    teacherPolitical:[
                        {required: true, trigger: 'blur'}
                    ],
                    courseId:[
                        {required: true, trigger: 'blur'}
                    ]
                },
                file: {
                    type: 'info',
                    fileName: '未选择任何照片',
                    fileData: ''
                },
            }
        },
        methods: {
            selectedFile(file){
                this.file.fileName=file.name;
                this.file.type='success';
                this.file.fileData=file;
            },
            editFormVisible: function () {
                this.$router.push('/teachers_manager');
            },
            editSubmit: function () {
                this.$refs.editForm.validate(v=>{
                   if(v){
                       this.$confirm('确认提交吗？', '提示', {}).then(() => {

                           let form=new FormData();
                       form.append("teacherRealName",this.editForm.teacherRealName);
                       form.append("teacherSex",this.editForm.teacherSex);
                       form.append("courseId",this.editForm.courseId);
                       form.append("teacherPolitical",this.editForm.teacherPolitical);
                       form.append("teacherCategory",this.editForm.teacherCategory);
                       form.append("teacherNational",this.editForm.teacherNational);
                       form.append("teacherBirth",this.editForm.teacherBirth);
                       form.append("teacherRecord",this.editForm.teacherRecord);
                       form.append("teacherNative",this.editForm.teacherNative);
                       form.append("teacherSchool",this.editForm.teacherSchool);
                       form.append("teacherEmail",this.editForm.teacherEmail);
                       form.append("teacherPhone",this.editForm.teacherPhone);
                       form.append("teacherDegree",this.editForm.teacherDegree);
                       form.append("teacherAdderss",this.editForm.teacherAdderss);
//                       form.append("teacherPwd",this.editForm.teacherPwd);
                       form.append("teacherTranning",this.editForm.teacherTranning);
                       form.append("teacherReward",this.editForm.teacherReward);
                       form.append("teacherPunish",this.editForm.teacherPunish);
                       form.append("teacherDetail",this.editForm.teacherDetail);

                       form.append("file",this.file.fileData);
                       alert(JSON.stringify(form));
                       insertTeacher(form).then((res) => {
                           this.editFormVisible = false;
                       if (res.resCode != 0) {
                           this.$message({
                               message: res.resMsg,
                               type: 'error'
                           });
                       } else {
                           this.$message({
                               message: '提交成功',
                               type: 'success'
                           });
                           this.$refs['editForm'].resetFields();
                          /* this.editFormVisible = false;
                           this.$router.push('/teachers_manager');*/
                       }


                       /* this.$message({
                        message: '提交成功',
                        type: 'success'
                        });
                        this.$refs['editForm'].resetFields();
                        this.editFormVisible = false;
                        this.$router.push('/teachers_manager');*/
                   });
                   });
                   }
                });
            },
            /*        handleAvatarSuccess(res, file) {
             this.imageUrl = URL.createObjectURL(file.raw);
             },
             beforeAvatarUpload(file) {
             const isJPG = file.type === 'image/jpeg';
             const isLt2M = file.size / 1024 / 1024 < 2;

             if (!isJPG) {
             this.$message.error('上传头像图片只能是 JPG 格式!');
             }
             if (!isLt2M) {
             this.$message.error('上传头像图片大小不能超过 2MB!');
             }
             return isJPG && isLt2M;
             }*/
        },

        mounted() {
            getRole().then((res) => {
                this.roleDesc = res.resData.list;
        })
            ;
            allCourse().then((res) => {
                this.allCourse = res.resData;
        })
            ;
        }
    }
</script>